iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
0
自我挑戰組

Angular 學習雜記系列 第 4

Angular 學習雜記-Angular資料夾、檔案說明

  • 分享至 

  • xImage
  •  
在上一篇完成基本的測試及安裝好Visual Studio Code後,就要先進入Visual Studio Code,來安裝Angular的擴充套件。在進入sual Studio Code後,直接按Ctrl + Shift + X,切換到Extensions擴充套件畫面,在搜尋條件中,輸入「Angular Extension Pack」,就會出現下述畫面:

https://ithelp.ithome.com.tw/upload/images/20190920/20000953PZAJuReQCW.png

上述是我已安裝完成的畫面,如果是沒有安裝的畫面,可以找到一個install按鈕,來安裝此套件。
最後,還要安裝一個官方出版的開發者工具,方便我們來Debug,安裝網址為:https://augury.rangle.io/ ,安裝完成,就會出現Chrome瀏覽器上,如下圖所示:

https://ithelp.ithome.com.tw/upload/images/20190920/20000953WBBA2TrPNP.png

接下來,在Visual Studio Code主畫面中,從「File  Open Folder」來開啟,我們上一篇文章,建立的專案,要注意的地方是,是要選取整個目錄即可。

https://ithelp.ithome.com.tw/upload/images/20190920/20000953uHWrpwatTf.png

開啟Angular 專案後,就會列出所有的目錄及檔案,如下圖所示:

https://ithelp.ithome.com.tw/upload/images/20190920/200009531jwEVkb3de.png

主要是要說明src目錄:

https://ithelp.ithome.com.tw/upload/images/20190920/20000953GUc2ZQ2RXa.png

下一步,就用一個簡單的範例,來介紹 Angular。


上一篇
Angular 學習雜記-Angular開發工具與環境建置(續)
下一篇
Angular 學習雜記-Angular簡單範例
系列文
Angular 學習雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言